<%= organization_page_header('services') %>
<%= breadcrumb [{:label => 'services', :link => services_path}] %>
<%= page_title :page_kind => 'Service', :page_label => 'Add' %>
<%= page_info 'Add new service.' %>

<%= section_panel 'Configuration', :width => 'double', :position => 'left' do %>
  <div class="form-horizontal">
    <div class="ciAttributes">
      <div class="category">
        <div class="name">Select Template</div>
          <div class="control-group">
            <%= label_tag :service_class_name, 'Service', :class => 'control-label' %>
            <div class="controls">
              <%= select_tag :service_class_name, grouped_options_for_select([['', [['Choose template...', '']]]] + @service_classes, @service_class_name), :id => 'service_select', :required => true %>
            </div>
          </div>
          <script type="text/javascript">
            $j("#service_select").on("change", function () {
              $j("#service_details").html('<%= escape_javascript(loading_indicator) %>');
              $j.ajax({url:  "<%= new_service_path %>", data: {service_class_name: this.value}});
            });
          </script>
        </div>
    </div>
  </div>
  <div id="service_details">
    <% if @service %>
      <%= render 'base/shared/edit_form',
                 {:resource   => @service,
                  :content    => 'service_details_content',
                  :remote     => false,
                  :form_url   => services_path,
                  :cancel_url => services_path} %>
    <% end %>

  </div>
<% end %>
